<%@ page contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c"
           uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>注册页</title>
    <script type="text/javascript">
        var alert_msg = '${alert_msg}';
        if(alert_msg != null && alert_msg.trim() != ''){
            window.alert(alert_msg) ;
        }
    </script>

    <style>
        body {
            background-image: url('img/3.jpg');
            background-size: cover;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            height: 100vh;
        }

        /* 登录表单容器 */
        .login {
            background-color: rgba(255, 255, 255, 0.9);
            width: 400px;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        /* 顶部标题部分 */
        .login-top {
            display: flex;
            justify-content: space-between;
            padding: 0 90px;
            margin-bottom: 32px;
            font-size: 30px;
        }

        .login-top a {
            font-size: 25px;
            font-weight: bold;
            color: #333;
            text-decoration: none;
            transition: color 0.3s;
        }

        .login-top a:hover {
            color: #be5234;
        }

        /* 登录表单内容 */
        .login-center {
            display: flex;
            align-items: center;
            margin-bottom: -6px;
        }

        .login-center-img {
            margin-right: 15px;
        }

        .login-center-img img {
            width: 30px;
            height: 30px;
            margin-left: 15px;
        }

        .login-center-input input {
            width: 300px;
            padding: 12px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 14px;
            outline: none;
            transition: border 0.3s;
        }

        .login-center-input input:focus {
            border-color: #de9050;
        }

        /* 按钮样式 */
        .login-button {
            width: 380px;
            height: 44px;
            line-height: 44px;
            background-color: #de9050;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 20px;
            font-weight: bold;
            cursor: pointer;
            transition: background-color 0.3s;
            margin-top: 25px;
            margin-left: 10px;
        }

        .login-button:hover {
            background-color: #be5234;
        }

    </style>
</head>
<body>
<h1 style="text-align: center;font-family: youyuan;font-size: 50px;padding-top:1px;font-weight: 700;color:#ffffff;margin-top: -55px;">宠 物 店 信 息 管 理 系 统</h1>
<form action="AuthServlet?action=register" method="post" onsubmit="return check()">
    <div class="login">
        <div class="login-top">
            <a href="login.jsp" style="color: black;text-decoration: none;">登录</a>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<a href="#" style="color:#be5234 ;text-decoration: none;">注册</a>
        </div>
        <div class="login-center clearfix">
            <div class="login-center-img"><img src="img/maozhua.png"/></div>
            <div class="login-center-input">
                <input type="text" id="username" name="username" value="" placeholder="请输入用户名"
                       onfocus="this.placeholder=''" onblur="this.placeholder='请输入用户名'"/>
            </div>
        </div>
        <br>
        <br>
        <div class="login-center clearfix">
            <div class="login-center-img"><img src="img/mima.png"/></div>
            <div class="login-center-input">
                <input type="password" id="password" name="password" value="" placeholder="请输入密码"
                       onfocus="this.placeholder=''" onblur="this.placeholder='请输入密码'"/>
            </div>
        </div>
        <br>
        <br>
        <div class="login-center clearfix">
            <div class="login-center-img"><img src="img/mima.png"/></div>
            <div class="login-center-input">
                <input type="password" id="password2" name="password2" value="" placeholder="确认密码"
                       onfocus="this.placeholder=''" onblur="this.placeholder='请确认密码'"/>
            </div>
        </div>
        <br>
        <button type="submit" class="login-button">注册</button>
    </div>
</form>
</body>
<script type="text/javascript">
    //提交之前进行检查，如果return false，则不允许提交
    function check() {
        //根据ID获取值
        var username = document.getElementById("username").value;
        var password = document.getElementById("password").value;
        var password2 = document.getElementById("password2").value;
        if (username == "") {
            alert("用户名不能为空！");
            return false;
        }
        if (password == "") {
            alert("密码不能为空！");
            return false;
        }
        if (password2 != password) {
            alert("密码输入不一致！");
            return false;
        }
        return true;
    }
</script>
</html>
